<template>
  <div class="demand-edit-wrap">

    <div class="demand-line-box">
      <div class="demand-line-con">
        <span class="demand-line"></span>
        <span class="demand-title">岗位要求：</span>
        <img :src="showDrawer1?require('./down.png'):require('./pull.png')" class="pull-pic" @click="openDemand1"/>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="demand-edit-con" v-show="showDrawer1">
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">性别年龄：</span>
          <van-field v-model="sexAge" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>


        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">纹身染发：</span>
          <van-field v-model="tattooHair" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">体检：</span>
          <van-field v-model="medicalFee" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">视力：</span>
          <van-field v-model="vision" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">文化技能：</span>
          <van-field v-model="culturalSkills" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">民族：</span>
          <van-field v-model="nation" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">身份证：</span>
          <van-field v-model="idCard" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other">
          <span class="demand-edit-text">其他要求：</span>
          <van-field v-model="postOther" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
      </div>
    </transition>

    <div class="demand-line-box">
      <div class="demand-line-con">
        <span class="demand-line"></span>
        <span class="demand-title">薪资福利：</span>
        <img :src="showDrawer2?require('./down.png'):require('./pull.png')" class="pull-pic" @click="openDemand2"/>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="demand-edit-con" v-show="showDrawer2">
        <div class="demand-edit-item-wx-other demand-edit-dist" v-if="postType == 0">
          <span class="demand-edit-text">底薪说明：</span>
          <van-field v-model="workingPrice" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist" v-if="postType == 0">
          <span class="demand-edit-text">加班费说明：</span>
          <van-field v-model="overtimeDetails" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist" v-if="postType == 1">
          <span class="demand-edit-text">工价：</span>
          <van-field v-model="hoursPrice" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">补贴说明：</span>
          <van-field v-model="subsidyDetails" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">发薪时间：</span>
          <van-field v-model="payrollTime" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">其他说明：</span>
          <van-field v-model="salaryOther" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
      </div>
    </transition>

    <div class="demand-line-box">
      <div class="demand-line-con">
        <span class="demand-line"></span>
        <span class="demand-title">食宿条件：</span>
        <img :src="showDrawer3?require('./down.png'):require('./pull.png')" class="pull-pic" @click="openDemand3"/>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="demand-edit-con" v-show="showDrawer3">
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">住宿：</span>
          <van-field v-model="accConditions" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">饮食：</span>
          <van-field v-model="diet" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>

        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">其他说明：</span>
          <van-field v-model="accOther" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
      </div>
    </transition>

    <div class="demand-line-box">
      <div class="demand-line-con">
        <span class="demand-line"></span>
        <span class="demand-title">工作时间：</span>
        <img :src="showDrawer4?require('./down.png'):require('./pull.png')" class="pull-pic" @click="openDemand4"/>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="demand-edit-con" v-show="showDrawer4">
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">工作制：</span>
          <van-field v-model="workSystem" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">班次时间：</span>
          <van-field v-model="shiftTime" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">其他说明：</span>
          <van-field v-model="workOther" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
      </div>
    </transition>

    <div class="demand-line-box">
      <div class="demand-line-con">
        <span class="demand-line"></span>
        <span class="demand-title">面试资料：</span>
        <img :src="showDrawer5?require('./down.png'):require('./pull.png')" class="pull-pic" @click="openDemand5"/>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="demand-edit-con" v-show="showDrawer5">
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">面试资料：</span>
          <van-field v-model="interviewData" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
        <div class="demand-edit-item-wx-other demand-edit-dist">
          <span class="demand-edit-text">其他说明：</span>
          <van-field v-model="interviewOther" rows="1" autosize type="textarea" class="demand-edit-wx-other"/>
        </div>
      </div>
    </transition>

    <div class="preview-box" v-show="hideBtn">
      <button type="button" class="preview" @click="preview">预览</button>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";

  export default {
    data() {
      return {
        showDrawer1: true,
        showDrawer2: true,
        showDrawer3: true,
        showDrawer4: true,
        showDrawer5: true,
        userSign: "",
        id: this.$route.query.id,
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true,//显示或者隐藏
        sexAge: "",  //性别年龄
        tattooHair: "",  //纹身染发
        medicalFee: "",  //体检
        vision: "",  //视力
        culturalSkills: "",  //文化技能
        nation: "",  //民族
        idCard: "",  //身份证
        postOther: "", //岗位其他要求
        hoursPrice: "",//工价
        workingPrice: "",  //底薪说明
        overtimeDetails: "", //加班费说明
        subsidyDetails: "",  //补贴说明
        payrollTime: "", //发薪时间
        salaryOther: "", //薪资福利其他说明
        accConditions: "", //住宿
        diet: "", //饮食
        accOther: "",  //食宿条件其他说明
        workSystem: "",  //工作制度
        shiftTime: "", //班次时间
        workOther: "", //工作时间其他说明
        interviewData: "", //面试资料
        interviewOther: "",  //面试其他说明
        postType: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));

      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
      this.queryWorkDetail();
    },
    methods: {
      queryWorkDetail() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_work_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_work_list?sgin=" + this.userSign + "&id=" + this.id + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.workInfo = resultObj.data[0];
            this.sexAge = this.$route.query.sexAge ? this.$route.query.sexAge : this.workInfo.sexAge;
            this.tattooHair = this.$route.query.tattooHair ? this.$route.query.tattooHair : this.workInfo.tattooHair;
            this.medicalFee = this.$route.query.medicalFee ? this.$route.query.medicalFee : this.workInfo.medicalFee;
            this.vision = this.$route.query.vision ? this.$route.query.vision : this.workInfo.vision;
            this.culturalSkills = this.$route.query.culturalSkills ? this.$route.query.culturalSkills : this.workInfo.culturalSkills;
            this.nation = this.$route.query.nation ? this.$route.query.nation : this.workInfo.nation;
            this.idCard = this.$route.query.idCard ? this.$route.query.idCard : this.workInfo.idCard;
            this.postOther = this.$route.query.postOther ? this.$route.query.postOther : this.workInfo.postOther;

            this.workingPrice = this.$route.query.workingPrice ? this.$route.query.workingPrice : this.workInfo.workingPrice;
            this.hoursPrice = this.$route.query.hoursPrice ? this.$route.query.hoursPrice : this.workInfo.hoursPrice;
            this.overtimeDetails = this.$route.query.overtimeDetails ? this.$route.query.overtimeDetails : this.workInfo.overtimeDetails;
            this.subsidyDetails = this.$route.query.subsidyDetails ? this.$route.query.subsidyDetails : this.workInfo.subsidyDetails;
            this.payrollTime = this.$route.query.payrollTime ? this.$route.query.payrollTime : this.workInfo.payrollTime;
            this.salaryOther = this.$route.query.salaryOther ? this.$route.query.salaryOther : this.workInfo.salaryOther;

            this.accConditions = this.$route.query.accConditions ? this.$route.query.accConditions : this.workInfo.accConditions;
            this.diet = this.$route.query.diet ? this.$route.query.diet : this.workInfo.diet;
            this.accOther = this.$route.query.accOther ? this.$route.query.accOther : this.workInfo.accOther;

            this.workSystem = this.$route.query.workSystem ? this.$route.query.workSystem : this.workInfo.workSystem;
            this.shiftTime = this.$route.query.shiftTime ? this.$route.query.shiftTime : this.workInfo.shiftTime;
            this.workOther = this.$route.query.workOther ? this.$route.query.workOther : this.workInfo.workOther;

            this.interviewData = this.$route.query.interviewData ? this.$route.query.interviewData : this.workInfo.interviewData;
            this.interviewOther = this.$route.query.interviewOther ? this.$route.query.interviewOther : this.workInfo.interviewOther;

            this.postType = this.workInfo.postType;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      },
      openDemand1() {
        this.showDrawer2 = false;
        this.showDrawer3 = false;
        this.showDrawer4 = false;
        this.showDrawer5 = false;
        this.showDrawer1 = !this.showDrawer1;
      },
      openDemand2() {
        this.showDrawer1 = false;
        this.showDrawer3 = false;
        this.showDrawer4 = false;
        this.showDrawer5 = false;
        this.showDrawer2 = !this.showDrawer2;
      },
      openDemand3() {
        this.showDrawer1 = false;
        this.showDrawer2 = false;
        this.showDrawer4 = false;
        this.showDrawer5 = false;
        this.showDrawer3 = !this.showDrawer3;
      },
      openDemand4() {
        this.showDrawer1 = false;
        this.showDrawer2 = false;
        this.showDrawer3 = false;
        this.showDrawer5 = false;
        this.showDrawer4 = !this.showDrawer4;
      },
      openDemand5() {
        this.showDrawer1 = false;
        this.showDrawer2 = false;
        this.showDrawer3 = false;
        this.showDrawer4 = false;
        this.showDrawer5 = !this.showDrawer5;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      preview() {
        this.$router.push({
          path: "/workpreview",
          query: {
            "id": this.id,
            "postType": this.postType,
            "sexAge": this.sexAge,
            "tattooHair": this.tattooHair,
            "medicalFee": this.medicalFee,
            "vision": this.vision,
            "culturalSkills": this.culturalSkills,
            "nation": this.nation,
            "idCard": this.idCard,
            "postOther": this.postOther,
            "workingPrice": this.workingPrice,
            "hoursPrice": this.hoursPrice,
            "overtimeDetails": this.overtimeDetails,
            "subsidyDetails": this.subsidyDetails,
            "payrollTime": this.payrollTime,
            "salaryOther": this.salaryOther,
            "accConditions": this.accConditions,
            "diet": this.diet,
            "accOther": this.accOther,
            "workSystem": this.workSystem,
            "shiftTime": this.shiftTime,
            "workOther": this.workOther,
            "interviewData": this.interviewData,
            "interviewOther": this.interviewOther
          }
        });
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .demand-edit-wrap
    wh(100%, 100%)
    .demand-line-box
      wh(100%, 1.333rem)
      border-bottom: 0.027rem solid #F2F2F2
      .demand-line-con
        display: flex
        align-items: center
        wh(100%, 1.333rem)
        .demand-line
          margin-left: 0.32rem
          margin-right: 0.32rem
          wh(0.08rem, 0.4rem)
          background: rgba(60, 175, 255, 1)
        .demand-title
          size-color(0.427rem, rgba(51, 51, 51, 1))
          font-weight: 500
        .pull-pic
          margin-left: auto
          padding: 0.32rem 0.44rem
          wh(0.373rem, 0.373rem)
    .demand-edit-con
      wh(100%, auto)
      padding-top: 0.48rem
      padding-bottom: 0.48rem
      display: flex
      flex-direction: column
      align-items: center
      .demand-edit-item-wx-other
        display: flex
        align-items: center
        wh(9.36rem, auto)
        .demand-edit-text
          width: 2.45rem
          size-color(0.373rem, #333)
        .demand-edit-wx-other
          wh(6.91rem, auto)
      .demand-edit-dist
        margin-bottom: 0.267rem
      .demand-edit-item-wx-other >>> .van-cell
        position: relative
        display: flex
        box-sizing: border-box
        width: 100%
        padding: 0.2rem 0.213rem
        overflow: hidden
        color: #333333
        font-size: 0.32rem
        line-height: 0.32rem
        background-color: #fff
        border: 0.013rem solid rgba(153, 153, 153, 1)
      .demand-edit-item-wx-other >>> .van-cell .van-field__control
        color: #333333
        font-size: 0.32rem
        padding-top: 0.05rem
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
      transform: translateY(-0.133rem);
      opacity: 0;
    }
    .preview-box
      fj(center, center)
      margin: 0 auto
      margin-top: 0.8rem
      padding-bottom: 0.64rem
      wh(100%, 1.28rem)
      .preview
        wh(90.4%, 1.28rem)
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        font-weight: 500
        border-radius(0.16rem)
</style>

